<template>
	<!--应聘管理-->
	<div id="applymanager">
		<com-top></com-top>
		<div class="wrap applybox">
			<div class="searchbox">
				<!--<el-input placeholder="请输入关键字搜索" v-model="search"></el-input>
				<el-button type="primary">搜索</el-button>-->
				<div class="recruit-top clearfixed">
					<div class="re-top-item">
						<label for="">关键字</label>
						<el-input v-model="input" placeholder="请输入"></el-input>
					</div>
					<div class="re-top-item">
						<label for="">职位类型</label>
						<el-input v-model="input" placeholder="不限"></el-input>
					</div>
					<div class="re-top-item">
						<label for="">合同状态</label>
						<el-input v-model="input" placeholder="不限"></el-input>
					</div>

					<el-button type="primary" icon="el-icon-search">搜索</el-button>
				</div>
				</div>
				<el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="cus-tab-applay">
					<el-tab-pane label="收件箱" name="first">
						<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize).filter(data => !search || data.rname.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column label="姓名" prop="rname">
							</el-table-column>
							<el-table-column label="职位名称" prop="pname">
							</el-table-column>
							<el-table-column label="发布城市" prop="city">
							</el-table-column>
							<el-table-column label="年龄" prop="age">
							</el-table-column>
							<el-table-column label="工作年限" prop="year">
							</el-table-column>
							<el-table-column label="学历" prop="educ">
							</el-table-column>
							<el-table-column label="查阅状态" prop="lookstate">
								<template slot-scope="scope">
									{{scope.row.lookstate|filterLookState }}
								</template>
							</el-table-column>
							<el-table-column label="下载状态" prop="uploadstate">
								<template slot-scope="scope">
									{{scope.row.uploadstate|filterUploadState }}
								</template>
							</el-table-column>
							<el-table-column align=" center" width="200">
								<template slot="header" slot-scope="scope">
									管理
								</template>
								<template slot-scope="scope">
									<el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">信息详情</el-button>
									<el-button size="mini" type="info" @click="handleDelete(scope.$index, scope.row)">简历下载</el-button>
								</template>
							</el-table-column>
						</el-table>
						<!--<div class="orther-opt">
						<el-button type="info" size="small">已查阅简历</el-button>
						<el-button type="info" size="small">已查阅简历</el-button>
						<el-button type="info" size="small">已查阅简历</el-button>
					</div>-->
					</el-tab-pane>
					<el-tab-pane label="已查阅简历" name="second">
						<el-table :data="alreadyShowData.filter(data => !search || data.rname.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column label="姓名" prop="rname">
							</el-table-column>
							<el-table-column label="职位名称" prop="pname">
							</el-table-column>
							<el-table-column label="发布城市" prop="city">
							</el-table-column>
							<el-table-column label="年龄" prop="age">
							</el-table-column>
							<el-table-column label="工作年限" prop="year">
							</el-table-column>
							<el-table-column label="学历" prop="educ">
							</el-table-column>
							<el-table-column label="查阅状态" prop="lookstate">
								<template slot-scope="scope">
									{{scope.row.lookstate|filterLookState }}
								</template>
							</el-table-column>
							<el-table-column label="下载状态" prop="uploadstate">
								<template slot-scope="scope">
									{{scope.row.uploadstate|filterUploadState }}
								</template>
							</el-table-column>
							<el-table-column align="center" width="400">
								<template slot="header" slot-scope="scope">
									管理
								</template>
								<template slot-scope="scope">
									<el-button size="mini" type="danger" @click="joinBlackCard(scope.$index, scope.row)">加入黑名单</el-button>
									<el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">信息详情</el-button>
									<el-button size="mini" type="info" @click="handleDelete(scope.$index, scope.row)">简历下载</el-button>
								</template>
							</el-table-column>
						</el-table>

						<!--<div class="orther-opt">
						<el-button type="info" size="small">加入黑名单</el-button>
					</div>-->
					</el-tab-pane>

					<el-tab-pane label="已下载" name="third">
						<el-table :data="alreadyShowData1.filter(data => !search || data.rname.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column label="姓名" prop="rname">
							</el-table-column>
							<el-table-column label="职位名称" prop="pname">
							</el-table-column>
							<el-table-column label="发布城市" prop="city">
							</el-table-column>
							<el-table-column label="年龄" prop="age">
							</el-table-column>
							<el-table-column label="工作年限" prop="year">
							</el-table-column>
							<el-table-column label="学历" prop="educ">
							</el-table-column>
							<el-table-column label="查阅状态" prop="lookstate">
								<template slot-scope="scope">
									{{scope.row.lookstate|filterLookState }}
								</template>
							</el-table-column>
							<el-table-column label="下载状态" prop="uploadstate">
								<template slot-scope="scope">
									{{scope.row.uploadstate|filterUploadState }}
								</template>
							</el-table-column>
							<el-table-column align="center" width="200">
								<template slot="header" slot-scope="scope">
									管理
								</template>
								<template slot-scope="scope">
									<el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">信息详情</el-button>
									<el-button size="mini" type="info" @click="handleDelete(scope.$index, scope.row)">简历下载</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-pagination background :page-sizes="[3, 5, 8]" layout="sizes,total,prev, pager, next" :total="total" class="cus-paginat" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage">
					</el-pagination>
				</el-tabs>
				<div class="advertise">
					<img src="../assets/img/scenery1-5.jpg" alt="" />
					<img src="../assets/img/scenery1-5.jpg" alt="" />
				</div>
			</div>
		</div>
</template>

<script>
	import Top from './top'
	export default {
		components: {
			'ComTop': Top
		},
		data() {
			return {
				activeIndex: '1',
				activeName: 'first',
				tableData: [{
					rname: '王小虎',
					pname: 'Web前端实习生',
					city: '成都',
					age: '22',
					year: '1年',
					educ: '本科',
					lookstate: 1,
					uploadstate: 0,
				}, {
					rname: '张三',
					pname: 'Java开发实习生',
					city: '成都',
					age: '25',
					year: '2年',
					educ: '本科',
					lookstate: 0,
					uploadstate: 1,

				}, {
					rname: '李四',
					pname: 'Java开发实习生',
					city: '成都',
					age: '26',
					year: '3年',
					educ: '本科',
					lookstate: 0,
					uploadstate: 1,

				}, {
					rname: '王五',
					pname: 'Java开发实习生',
					city: '成都',
					age: '22',
					year: '1年',
					educ: '本科',
					lookstate: 1,
					uploadstate: 0,

				}],
				search: '',
				alreadyShowData: [], //已查阅
				alreadyShowData1: [], //已下载
				input:'',
				currentPage:1,   //当前页
				pagesize:3,  //每页尺寸
				total:0,
			}
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			//选项卡
			handleClick(tab, event) {
				console.log(tab, event);
			},
			//加入黑名单
			joinBlackCard() {
				this.$message.success("加入成功!");
			},
			handleSizeChange(val) {
		        console.log(`每页 ${val} 条`);
		    },
		    handleCurrentChange(val) {
		        console.log(`当前页: ${val}`);
		    }
		},
		filters: {
			filterLookState(val) {
				if(val === 1) return "已查阅";
				return "未查阅";

			},
			filterUploadState(val) {
				if(val === 1) return "已下载";
				return "未下载";

			}
		},
		computed: {
			alreadyData(val) {
				return JSON.parse(JSON.stringify(this.tableData));
			}
		},
		mounted() {
			
			//计算数据的数量
			this.total = this.tableData.length;
			console.log(this.total)
			this.alreadyShowData = this.alreadyData.filter(item => {
				return item.lookstate == 1;
			})
			this.alreadyShowData1 = this.alreadyData.filter(item => {
				return item.uploadstate == 1;
			})
		}
	}
</script>
<style>
	.el-table td,
	.el-table th {
		text-align: center;
	}
</style>
<style>
	.box {
		color: #00CFFF;
	}
	
	.cus-menu {
		margin-top: 30px;
	}
	
	#applymanager {
		background-color: #f1f1f1;
		height: 100%;
	}
	
	#applymanager .el-tabs__header {
		/*margin: 0;*/
	}
	
	#applymanager .el-tabs--card>.el-tabs__header {
		border-bottom: 1px solid #00BFCC;
	}
	/*選項卡*/
	
	.cus-tab-applay {
		background-color: #fff;
		margin-top: 50px;
		clear: both;
		box-sizing: border-box;
		width: 80%;
		float: left;
	}
	
	.advertise {
		float: right;
		width: 18%;
		margin-top: 50px;
	}
	
	.advertise img {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.applybox {
		padding: 15px;
		overflow: hidden;
	}
	/*搜索*/
	
	.searchbox {
		/*float: right;*/
		margin-top: 30px;
	}
	
	.searchbox .el-input {
		width: 200px;
	}
	
	.cus-paginat {
		text-align: center;
		margin-top: 50px;
		background-color: #fff;
		margin-bottom: 20px;
	}
	
	.cus-paginat li {
		/*background-color: #fff;*/
	}
	
	/*搜索*/
	.recruit-top {
		margin-top: 30px;
		background-color: #fff;
		padding: 35px 25px 25px;
		box-sizing: border-box;
		border-bottom: 1px solid #ccc;
	}
	
	.recruit-top .re-top-item {
		float: left;
		margin-right: 50px;
	}
	
	.re-top-item label {
		margin-right: 5px;
	}
	
	.recruit-top .el-input {
		display: inline-block;
		width: 200px;
	}
</style>